<script setup name="ResultPage">
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
  detailsobj: JSON.parse(sessionStorage.getItem("details")),
  arr: [
    { title: "通过", icons: "checked", colors: "#0cb683", class: "p1" },
    { title: "存在风险", icons: "warning", colors: "#fec600", class: "p2" },
    { title: "存在告警", icons: "clear", colors: "#ff3b30", class: "p3" },
  ],
  actives: 0,
  carnumber: sessionStorage.getItem("carNum"),
});
const toDetails = () => {
  router.push("/reportDetails");
};
const gotocar = () => {
  router.push("/carNumber");
};
onMounted(() => {
  getdata();
});
const getdata = () => {
  let obj = {
    A: 0,
    B: 1,
    C: 2,
  };
  state.actives = obj[state.detailsobj.synResult];
};
</script>
<template>
  <div class="result_page">
    <top-title title="检测结果" @backbtn="router.go(-1)" />
    <div class="app_content">
      <div class="content">
        <van-icon
          :name="state.arr[state.actives].icons"
          size="50"
          :color="state.arr[state.actives].colors"
        />
        <p :class="state.arr[state.actives].class">
          {{ state.arr[state.actives].title }}
        </p>
        <p class="nomarls">
          {{ state.carnumber + "登船检测" + state.arr[state.actives].title }}
        </p>
      </div>
      <div>
        <van-button block style="margin-top: 30px" @click="toDetails"
          >查看报告详情</van-button
        >
        <van-button
          color="#1c4880"
          block
          style="margin-top: 30px"
          @click="gotocar"
          >返回录入车牌</van-button
        >
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.result_page {
  .content {
    height: 200px;
    text-align: center;
    padding-top: 60px;
    margin-bottom: 15px;
    background-color: #fff;
    border-radius: 8px;
    // box-shadow: 1px 1px 4px #888888;
    .nomarls {
      font-size: 18px;
      margin-top: 10px;
    }
    .p1 {
      font-size: 22px;
      margin-top: 10px;
      color: #0cb683;
    }
    .p2 {
      font-size: 22px;
      margin-top: 10px;
      color: #fec600;
    }
    .p3 {
      font-size: 22px;
      margin-top: 10px;
      color: #ff3b30;
    }
    .p4 {
      font-size: 20px;
      margin-top: 10px;
      color: #2dd8ab;
    }
  }
  .button_class {
    text-align: center;
  }
}
</style>
